import { Button, message, Dropdown, Avatar, Modal } from 'antd';
import { PoweroffOutlined, UserDeleteOutlined, SortAscendingOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useState, useEffect, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { getStuInfoApi } from '../api/students';
import { getTypesApi } from '../api/types';

export default function Home() {
    const noticeRef = useRef(null);
    const rankinRef = useRef(null);
    const modifyRef = useRef(null);
    const [types, setTypes] = useState([])
    // console.log(types);

    const [item, setItems] = useState([])
    const userinfo = localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null;
    // console.log(1111111111, userinfo);

    const navigate = useNavigate()
    const { confirm } = Modal;
    const showPromiseConfirm = () => {
        confirm({
            title: '退出账号',
            icon: <ExclamationCircleOutlined />,
            content: '您确定要退出当前账号吗?',
            okText: '确定',
            cancelText: "取消",
            onOk() {
                localStorage.clear()
                navigate('/login', { replace: true })
                // return new Promise((resolve, reject) => {
                //     // console.log(resolve,reject);
                //     // setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                //     navigate('/login')
                //     // localStorage.clear()
                // }).catch(() => console.log('Oops errors!'));
            },
            onCancel() { },
        });
    };
    function goTest(_id) {
        console.log('跳转', _id);
        // alert('跳转')
        // navigate(`/test?typeId=`,{_id})
        navigate(`/test?typeId=`)
    }
    // 点击显示修改资料模态框
    function showModifyData() {
        // document.querySelector(".modifyDataBox").style.display = "block";
        console.log(modifyRef);
        modifyRef.current.style.display = 'block'
    }
    // 点击显示排行榜模态框
    function showRankingList() {
        // document.querySelector(".rankingListBox").style.display = "block";
        rankinRef.current.style.display = 'block'
    }
    // 点击显示公告
    function showNotice() {
        console.log(noticeRef.current);
        noticeRef.current.style.display = 'block'
    }
    // 点击隐藏修改资料 = 排行榜模态框
    function close() {
        // document.querySelector(".modifyDataBox").style.display = "none";
        // document.querySelector(".rankingListBox").style.display = "none";
        modifyRef.current.style.display = 'none';
        rankinRef.current.style.display = 'none';
        noticeRef.current.style.display = 'none';
    }
    function goLogin() {
        // console.log(111111);
        // message.success('登录')
        navigate('/login')
    }
    function goReg() {
        navigate('/register')
    }
    useEffect(() => {
        getStuInfoApi().then(res => {
            // console.log('==========', res);
            // console.log(userinfo);
            if (res.code === 1) {
                localStorage.userinfo = JSON.stringify(res.data);
                // console.log(localStorage.userinfo.name);
            }
        }).catch(err => {
            console.log(err);
        })

        // 获取分类列表数据接口
        getTypesApi().then(res => {
            // console.log(99999999, res);
            if (res.code == 1) {
                // console.log(res.data);
                setTypes(res.data)
            }
        }).catch(err => {
            console.log(err);
        })
    }, []);
    const items = [
        {
            key: '1',
            // label: '个人中心',
            label: (
                <a onClick={showModifyData}>修改资料</a>
            ),
            icon: <UserDeleteOutlined />
        },
        {
            key: '2',
            // label: '排行榜',
            label: (
                <a onClick={showRankingList}>排行榜</a>
            ),
            icon: <SortAscendingOutlined />
        },
        {
            key: '3',
            // label: '退出登录',
            label: (
                <a onClick={showPromiseConfirm}>退出登录</a>
            ),
            icon: <PoweroffOutlined />,
        },

    ];
    return (
        <div className='homeBox'>
            <div className="homeNav">
                <div className="homeNav_center">
                    <div className="homeNav_logo">
                        <img src="/static/home/logo.png" alt="" />
                    </div>
                    <ul className='nav'>
                        <li className='nav_li'><a href="">首页</a></li>
                        <li className='nav_li'><a href="">考试</a></li>
                        <li className='nav_li'><a href="">错题本</a></li>
                        <li className='nav_li'><a href="">收藏夹</a></li>
                    </ul>
                    {/* <div className="homeNav_right">
                        <span onClick={goLogin}>登录</span>
                        <span>|</span>
                        <span onClick={goReg}>注册</span>
                    </div> */}
                    {userinfo ? <div className="homeNav_right">
                        <Dropdown
                            menu={{
                                items,
                            }}
                            placement="bottom"
                            arrow
                        >
                            <Avatar style={{ width: '44px', height: '44px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '12px' }}
                                src={userinfo.avatar} />
                        </Dropdown>
                        <span className='homeNav_name'>{userinfo.name}</span>

                        {/* <span onClick={goLogin}>登录</span>
                        <span>|</span>
                        <span onClick={goReg}>注册</span> */}

                    </div> : <div className="homeNav_right">
                        <span onClick={goLogin}>登录</span>
                        <span>|</span>
                        <span onClick={goReg}>注册</span>

                    </div>}

                    {/* <div className="homeNav_right"> */}
                    {/* 已登录首页 */}
                    {/* <Dropdown
                            menu={{
                                items,
                            }}
                            placement="bottom"
                            arrow
                        >
                            <Avatar style={{ width: '44px', height: '44px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '12px' }}
                                src="static/home/user.png" />
                        </Dropdown>
                        <span className='homeNav_name'>迪丽热巴</span> */}

                    {/* 未登录首页 */}
                    {/* <span onClick={goLogin}>登录</span>
                        <span>|</span>
                        <span onClick={goReg}>注册</span> */}

                    {/* </div> */}
                </div>
            </div>
            {/* banner */}
            <div className="homeBanner">
                {/* <ul className="list_box">
                    <li className='li'>
                        <div className='img'>
                            <img src="/static/home/icon-1.png" alt="" />
                        </div>
                        <p className='li_img'>22222</p>
                    </li>
                </ul> */}
                <ul className="list_box">
                    {types.map(item => {
                        // console.log(item);
                        return <li className='li' key={item._id} >
                            <div className='img'>
                                <img src={item.icon} alt="" />
                            </div>
                            <p className='li_img' onClick={() => goTest(item._id)}>{item.type}</p>
                            {/* <Link to='/test?typeId='{item._id}>{item.type}</Link> */}
                        </li>
                    })}
                </ul>
            </div>
            <div className="serious_box">
                <div className="serious_box_title">EXAMINATION</div>
                <div className="serious_box_text">严肃考试</div>
                <div className="serious_box_infoBox">
                    <div className="serious_box__img"></div>
                    <ul className="serious_box__text">
                        <li className='serious_box__textLi'>适用于高校考试、认证考试、招聘考试等严格防作弊场景 </li>
                        <li className='serious_box__textLi'>学员考前调试设备，本地备份答案及云端同步，断电断网续考 </li>
                        <li className='serious_box__textLi'>人脸识别与权威数据库比对，AI监考中心三路音视频实时监考 </li>
                        <li className='serious_box__textLi'>支持匿名判卷及分题分学员判卷，避免判卷过程的舞弊行为 </li>
                        <div className='serious_box_btn'>
                            <Button className='serious_box_more' type="primary">探索更多</Button>
                        </div>
                    </ul>
                </div>
            </div>
            <div className="homeBanner_main">
                {/* <div className="homeBanner_main_box">DATA STATISTICS</div> */}
                <div className="homeBanner_main_box">
                    <div className="homeBanner_main_box_title">DATA STATISTICS</div>
                    <div className="homeBanner_main_box_text">数据统计</div>
                    <ul className="data_box">
                        <li className='data_boxLi'>
                            <div className="data_boxLi_circular">
                                <div className="data_boxLi_two_circular">186<span className='circular_text'>道</span></div>
                            </div>
                            <p className='data_boxLi_text'>练习题数</p>
                        </li>
                        <li className='data_boxLi'>
                            <div className="data_boxLi_circular dayColor2">
                                <div className="data_boxLi_two_circular dayColor">5<span className='circular_text'>天</span></div>
                            </div>
                            <p className='data_boxLi_text'>学习天数</p>
                        </li>
                        <li className='data_boxLi'>
                            <div className="data_boxLi_circular light_three">
                                <div className="data_boxLi_two_circular Dark_three">66<span className='circular_text'>分</span></div>
                            </div>
                            <p className='data_boxLi_text'>最近考试</p>
                        </li>
                        <li className='data_boxLi'>
                            <div className="data_boxLi_circular light_four">
                                <div className="data_boxLi_two_circular Dark_four">74<span className='circular_text'>分</span></div>
                            </div>
                            <p className='data_boxLi_text'>平均分数</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div className="notice_box">
                <div className="notice_box_title">ANNOUNCEMENT</div>
                <div className="notice_box_text">考试公告</div>
                <div className="notice_twoBox">
                    <div className="notice_twoBox_left"></div>
                    <div className="notice_twoBox_right">
                        <ul className='optionBox'>
                            <li className='optionBoxLi' onClick={showNotice}>全部</li>
                            <li className='optionBoxLi'>最近</li>
                            <li className='optionBoxLi oneMonth'>一个月前</li>
                        </ul>
                        <div className="infoBox">
                            <div className='infoBox_title'>2022年安徽公务员考试公告</div>
                            <div className='infoBox_text'>关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告为认真贯彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...</div>
                        </div>
                        <div className="infoBox">
                            <div className='infoBox_title'>关于2022年我省高职单招考试推迟举行的公告</div>
                            <div className='infoBox_text'>关于2022年我省高职单招考试推迟举行的公告 鉴于当前我省新冠肺炎疫情防控形势，为保障广大考生身体健康和生命安全，经研究，原定于4月9日...</div>
                        </div>
                        <div className="infoBox infoBox_textLast">
                            <div className='infoBox_title'>教师资格证考试公告_中小学教师资格证考试资讯</div>
                            <div className='infoBox_text'>中小学和幼儿园教师资格考试公告栏目提供全国中小学和幼儿园教师资格考试最新公告,全国教师资格现场确认安排,全国教师资格考试成绩查询,全国教...</div>
                        </div>
                    </div>
                </div>
            </div>
            <footer className='footer'>
                Copyright © 2021  成都蜗牛创想科技有限公司
            </footer>

            {/* 修改资料 */}
            <div className="modifyDataBox" ref={modifyRef}>
                <div className="modifyDataBox_closeIcon" onClick={close}>
                    <img src="/static/home/popclose.png" alt="" />
                </div>
                <div className="modifyDataBox_top">修改资料</div>
                <div className="modifyBox_main">
                    <div className="modifyBox_mainBox">
                        <div className="modifyBox_mainLeft">
                            <div className="modifyBox_mainLeftImg">
                                {/* <img src="/static/home/user2.png" alt="" /> */}
                                {/* <img src={userinfo.avatar} alt="头像" /> */}
                            </div>
                            {/* <p style={{ marginTop: '14px', marginBottom: '11px' }}>李四</p> */}
                            {/* <p style={{ marginTop: '14px', marginBottom: '11px' }}>{userinfo.name}</p> */}
                            <span>点击图片修改头像</span>
                        </div>
                        <div className="modifyBox_mainRight">
                            <div style={{ marginBottom: '20px' }}>
                                <label>手机号：</label>
                                {/* <input type="text" value='15228161945' disabled /><span>*手机号不可更改</span> */}
                                {/* <input type="text" value={userinfo.phone} disabled /><span>*手机号不可更改</span> */}
                            </div>
                            <div style={{ marginBottom: '20px' }}>
                                <label>姓&emsp;名：</label>
                                {/* <input type="text" placeholder='李四' /><span>*由字母、数字构成</span> */}
                                {/* <input type="text" placeholder={userinfo.name} /><span>*由字母、数字构成</span> */}
                            </div>
                            <div style={{ marginBottom: '20px' }}>
                                <label>性&emsp;别：</label>
                                <span className='sexInput'>
                                    <div className='radioBox'>
                                        <input className='radioInput' type="radio" name='sex' />男
                                        <input className='radioInput' type="radio" name='sex' />女
                                    </div>
                                    {/* <input className='radioInput' type="radio" />男
                                <input className='radioInput' type="radio" />女 */}
                                </span>
                            </div>
                            <div style={{ marginBottom: '20px' }}>
                                <label>部&emsp;门：</label>
                                {/* <input type="" /> */}
                                <select name="" id="select">
                                    <option value="">信息中心</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div className="modifyBox_mainBtn">
                        <button className='cancelBtn' onClick={close}>取消</button>
                        <button className='determineBtn'>确定</button>
                    </div>
                </div>
            </div>

            {/* 排行榜 */}
            <div className="rankingListBox" ref={rankinRef}>
                <div className="modifyDataBox_closeIcon" onClick={close}>
                    <img src="/static/home/popclose.png" alt="" />
                </div>
                <table style={{ width: '364px', margin: '0 auto', marginTop: '20px' }}>
                    <tbody>
                        <td style={{ textAlign: 'left', color: '#999999' }}>名次</td>
                        <td style={{ textAlign: 'center', color: '#999999' }}>考试</td>
                        <td style={{ textAlign: 'right', color: '#999999' }}>成绩</td>
                    </tbody>
                </table>
                <div className="colored">
                    <table style={{ width: '364px', margin: '0 auto', }}>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#f60000', width: '30px', fontWeight: 'normal' }}>1</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table' >
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: ' #ff7a18', fontWeight: 'normal' }}>2</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#666666', fontWeight: 'normal' }}>3</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>4</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>5</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>6</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>7</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>8</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>9</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', width: '30px', color: '#b7b7b7', fontWeight: 'normal' }}>10</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
            </div>

            {/* 公告 */}
            <div className="notice" ref={noticeRef}>
                <div className="modifyDataBox_closeIcon" onClick={close}>
                    <img src="/static/home/popclose.png" alt="" />
                </div>
                <div className="noticeTitle">蜗牛创想7周年 | 探寻职业教育的本质</div>
                <div className="line"></div>
                <div className="noticeContent">
                    "	今天这篇文章为蜗牛创想CEO邓强老师对内的全员邮件，在公司成立7周年这个特殊的日子，邓老师向大家分享了蜗牛创想近年来在探寻职业教育本质上的一些思考和体会。
                </div>
            </div>
        </div>
    )
}
